<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes">
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
	<!--去缓存-->
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
	<META HTTP-EQUIV="Expires" CONTENT="0"><!--end-->
	<title>羊仓健康生活家</title>
	<link rel="stylesheet" href="css/style.css" />
	<!--<link rel="stylesheet" href="css/index.css" />-->
	<link rel="stylesheet" href="css/gwc.css" />
	<link rel="stylesheet" href="css/mui.min.css" />
	<link rel="stylesheet" href="css/app.css" />
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/gwc.js" ></script>
	<script type="text/javascript" src="js/flexible.js" ></script>
	<script type="text/javascript" src="js/Calculation.js" ></script>
	<script type="text/javascript" src="js/basePathUtil.js" ></script>
	<!--弹出-->
	<script type="text/javascript" src="js/layer-mobile/layer.js" ></script>
	<!--货币格式化-->
	<script type="text/javascript" src="js/jquery-formatcurrency/jquery.formatCurrency.js" ></script>
	<script type="text/javascript">
		<!--
		var basePath=basePath();
		var access_token = GetUrl("access_token");
		$(document).ready(function(){
			$("#allOrder").bind("click",function(){
				window.location.href= basePath+"res/orderList.html?access_token="+access_token;
			});
			// 收货地址
			$("#address").bind("click",function(){
				window.location.href= basePath+"res/addressList.html?access_token="+access_token;
			});
			// to首页
			$("#index").bind("click",function(){
				window.location.href= basePath+"v1/user/wx/login";
			});

			// to限时购
			$("#limit").bind("click",function(){
				window.location.href= basePath+"res/xsg.html?access_token="+access_token+"&type=3";
			});

			// to每日优礼
			$("#everyday").bind("click",function(){
				window.location.href= basePath+"res/mryx.html?access_token="+access_token+"&type=2";
			});

			// to购物车
			$("#shopping").bind("click",function(){
				window.location.href= basePath+"res/gwc.html?access_token="+access_token;
			});

			// to个人中心
			$("#my").bind("click",function(){
				window.location.href= basePath+"v1/user/wx/login"
			});
		});



		//-->
	</script>
</head>
<body>
<div class="warp">
	<!--头部-->

	<div class="topTitle">
		<a class="topReturn" onclick="history.go(-1)">
			<img src="/yangcangclub/res/img/baxk.png" alt="">
		</a>
		<p class="title">购物车</p>
		<!--<p class="hrefgwc" style="display: none;">编辑</p>-->
	</div>
	<!--商品购物开始-->

	<div class="catbox mui-content">
		<ul id="OA_task_1" class="catul mui-table-view gwc_tb2">
			<!--<li class="catlist mui-table-view-cell" style="padding: 0;">-->
				<!--<div class="mui-slider-right mui-disabled">-->
					<!--<a class="mui-btn" style="transform: translate(-50px, 0px);padding: 0 10px ; background: #007234;"><img src="img/delete.png"></a>-->
				<!--</div>-->

				<!--<div class="catlist mui-slider-handle">-->
					<!--<div class="list-left">-->
						<!--<div class="boradiu"></div>-->
						<!--<div class="left-jpg">-->
							<!--<img src="img/good.png">-->
						<!--</div>-->
						<!--&lt;!&ndash;<input class="left-jpg newslist" id="newslist-1" name="newslist" value="1" type="checkbox" />&ndash;&gt;-->
					<!--</div>-->
					<!--<div class="list-right">-->
						<!--<div class="right-jpg">-->
							<!--<img src="img/06.png">-->
						<!--</div>-->
						<!--<div class="right-txt">-->
							<!--<p>珍惜天地天然营养富硒鸡蛋 年卡 30枚/每月*12</p>-->
							<!--<div class="right-conten">-->
								<!--<p class="right-mony price" id="total1">￥2376.00</p>-->
								<!--<div class="right-btn">-->
									<!--<input type="button" value="-" class="min" id="min1">-->
									<!--<input type="text" value="1" class="number" id="number1">-->
									<!--<input type="button" value="+" class="add" id="add1">-->
								<!--</div>-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</li>-->
			<!--<li class="catlist mui-table-view-cell" style="padding: 0;">-->
			<!--<div class="mui-slider-right mui-disabled">-->
			<!--<a class="mui-btn" style="transform: translate(-50px, 0px);padding: 0 10px ; background: #007234;"><img src="img/delete.png"></a>-->
			<!--</div>-->

			<!--<div class="catlist mui-slider-handle">-->
			<!--<div class="list-left">-->
			<!--&lt;!&ndash;<input class="left-jpg newslist" id="newslist-2" name="newslist"  value="1" type="checkbox" />&ndash;&gt;-->
			<!--<div class="boradiu"></div>-->
			<!--<div class="left-jpg">-->
			<!--<img src="img/good.png">-->
			<!--</div>-->
			<!--</div>-->
			<!--<div class="list-right">-->

			<!--<div class="right-jpg">-->
			<!--<img src="img/06.png">-->
			<!--</div>-->
			<!--<div class="right-txt">-->
			<!--<p>珍惜天地天然营养富硒鸡蛋 年卡 30枚/每月*12</p>-->
			<!--<div class="right-conten">-->
			<!--<p class="right-mony price" id="total2">￥2376.00</p>-->
			<!--<div class="right-btn">-->
			<!--<input type="button" value="-" class="min" id="min2"/>-->
			<!--&lt;!&ndash;<input type="text" value="1" class="number" id="text_box2"/>&ndash;&gt;-->
			<!--<input id="number2" name="" type="text" class="number" value="1" />-->
			<!--&lt;!&ndash;<div class="number">-->
			<!--<p>1</p>-->
			<!--</div>&ndash;&gt;-->
			<!--<input type="button" value="+" class="add" id="add2">-->
			<!--</div>-->
			<!--</div>-->
			<!--</div>-->
			<!--</div>-->
			<!--</div>-->
			<!--</li>-->
		</ul>
	</div>
	<!--商品结束-->
	<!--<总价结算开始>-->
	<div class="settlement">
		<div class="set-left">
			<div class="seradiu"></div>
			<!--<input class="set-jpg newslist allselect" id="Checkbox1" value="1" type="checkbox" />-->
			<div class="set-jpg checkall">
				<img src="img/good.png">
			</div>
		</div>
		<p class="setqx">全选(<span id="productCount">0</span>)</p>
		<div class="set-right">
			<button onclick="submitInfo()">结算</button>
		</div>
		<p class="setmony price" id="productTotalPrice">
            ¥0.00
        </p>
	</div>
	<!--<总价结算结束>-->

	<!--底导航开始-->
	<div id="nav">
		<ul class="nav-ul">
			<li id="index"><img src="/yangcangclub/res/img/1.png"><p>首页</p></li>
			<!--<li id="limit"><img src="/yangcangclub/res/img/2.png"><p>限时购</p></li>-->
			<li id="everyday"><img src="/yangcangclub/res/img/3.png"><p>每日优选</p></li>
			<li id="shopping"><img src="/yangcangclub/res/img/04—.png"><p style="color:#007234">购物车</p></li>
			<li id="my"><img src="/yangcangclub/res/img/5.png"><p>我的</p></li>
		</ul>
	</div>
	<!--底导航开始-->
</div>
</body>
<script>
    /**
     * 结算金额
     */
    function submitInfo() {
        //初始化数量和金额
        var productCount = 0,productTotalPrice=0,listCount=0,checkCount=0,ids='';
        //判断是否为全选
        $("body .list-left .checkbox").each(function(){
            listCount++;
            //如果选中，就要计算总额
            if($(this).is(".left-jpg")){
//                alert($(this).closest("li").attr("id"));
                checkCount++;
                productTotalPrice+=parseFloat($(this).find(".unitPrice").val())*parseInt($(this).find(".quality").val());
				ids+=$(this).closest("li").attr("id")+',';
            }
		});
		if(listCount==0){layer.open({content: "购物车为空，无法结算",skin: 'msg',time: 1});return;}
		if(checkCount ==0){layer.open({content: "您未选中商品，无法结算",skin: 'msg',time: 1});return;}
		ids=ids.substring(0,ids.length-1);
		window.location.href=basePath+"res/html/gwcsubup.html?access_token="+access_token+'&ids='+ids+"&t="+new Date().getTime();

	}
    /**
     * 组装商品
     * @param product
     */
	function item(product){
		var item = '';
		item+='<li class="catlist mui-table-view-cell" style="padding: 0;" data-limit="'+product.isLimit+'" id="'+product.id+'">';
		item+='<div class="mui-slider-right mui-disabled">';
		item+='<a class="mui-btn" style="transform: translate(-50px, 0px);padding: 0 10px ; background: #007234;"><img src="img/delete.png"></a>';
		item+='</div>';
		item+='<div class="catlist mui-slider-handle">';
		item+='<div class="list-left">';
		item+='<div class="boradiu"></div>';
		item+='<div class="left-jpg checkbox">';
        item+='<input type="hidden" class="unitPrice" value="'+product.unitPrice+'"/>';
        item+='<input type="hidden" class="quality" value="'+product.num+'"/>';
		item+='<img src="img/good.png">';
		item+='</div>';
		item+='<!--<input class="left-jpg newslist" id="newslist-1" name="newslist" value="1" type="checkbox" />-->';
		item+='</div>';
		item+='<div class="list-right">';
		item+='<div class="right-jpg">';
		item+='<img src="'+product.bannerUrl+'" title="'+product.name+'">';
		item+='</div>';
		item+='<div class="right-txt">';
		item+='<p>'+product.name+'</p>';
		item+='<div class="right-conten">';
		item+='<p class="right-mony price" id="total1">'+$.getFormattedCurrency(product.unitPrice)+'</p>';
		item+='<div class="right-btn">';
		if(product.num==1){
			item+='<input type="button" value="-" class="min" style="border:1px solid #999;background:none;">';
		}else{
			item+='<input type="button" value="-" class="min" style="border:1px solid #333;background:none;">';
		}
//		item+='<input type="button" value="-" class="min" style="background:none">';
		item+='<input type="text" value="'+product.num+'" class="number" readonly>';
		item+='<input type="button" value="+" class="add" style="background:none">';
		item+='</div>';
		item+='</div>';
		item+='</div>';
		item+='</div>';
		item+='</div>';
		item+='</li>';
		$("#OA_task_1").append(item);
	}
    /**
     * 获取购物车列表
     */
	function showTrolley(){
		$.ajax({
			type:"GET",
			url:basePath+"/v1/trolley/list?access_token="+access_token,
			dataType : 'json',
			data:{
				pageNum:1,
				pageSize:99
			},
			success:function(data){
				if(data.code==1000) {
					//有数据
					if(data.data.list.length>0){
						$.each(data.data.list, function(index, content){
							item(data.data.list[index]);
						});
                        count();

					}
				}else{
					layer.open({content: data.msg,skin: 'msg',time: 1});
				}
			},
			error:function(data) {
			}
		});
	}
	showTrolley();
</script>
<script>
	//左滑动删除
	mui.init();
	(function($){
		$('#OA_task_1').on('tap', '.mui-btn', function(event) {
			var elem = this;
			var li = elem.parentNode.parentNode;
			mui.confirm('确认删除该条记录？', '', btnArray, function(e) {
				if (e.index == 0) {
					$.ajax({
						type:"GET",
						url:basePath+"/v1/trolley/del?access_token="+access_token,
						dataType : 'json',
						data:{
							tids:elem.closest("li").getAttribute("id")
						},
						success:function(data){
							if(data.code==1000) {
								li.parentNode.removeChild(li);
                                count();
                               
                            }else{
								layer.open({content: data.msg,skin: 'msg',time: 2});
							}
						},
						error:function(data) {
						}
					});
				} else {
					setTimeout(function() {
						$.swipeoutClose(li);
					}, 0);
				}
			});
		});
		var btnArray = ['确认', '取消'];
	})(mui);
</script>
<script>
	function updateTrolley(id,type,e){
		$.ajax({
			type:"POST",
			url:basePath+"/v1/trolley/update?access_token="+access_token,
			dataType : 'json',
			data:{
				tid:id,
				type:type
			},
			success:function(data){
				if(data.code==1000) {
                    count();
//					layer.open({content: "修改成功",skin: 'msg',time: 1});
				}else{
					layer.open({
						content: data.msg,
						skin: 'msg',
						time: 1,
						end: function (index) {
							window.location.reload();
						}
					});
				}
			},
			error:function(data) {
			}
		});
	}
	//核心,计算选中的商品总金额
	function count(){
        //初始化数量和金额
        var productCount = 0,productTotalPrice=0,listCount=0,checkCount=0;
        //判断是否为全选
        $("body .list-left .checkbox").each(function(){
            listCount++;
            //如果选中，就要计算总额
            if($(this).is(".left-jpg")){
                checkCount++;
                productTotalPrice+=parseFloat($(this).find(".unitPrice").val())*parseInt($(this).find(".quality").val());
            }
        });
        //如果都被选中了，标记全选按钮，反之取消全选按钮
        if(listCount==checkCount && checkCount>0 && listCount>0){
            $(".checkall").addClass("set-jpg");
            $(".checkall").find("img").show();
        }else{
            $(".checkall").removeClass("set-jpg");
            $(".checkall").find("img").hide();
        }
        //设置总数和总金额
        $("#productCount").text(checkCount);
        $("#productTotalPrice").text($.getFormattedCurrency(productTotalPrice));
    }
	$(function(){
        //单选按钮
//      var once = true ;
		$("body").on("tap",".list-left",function() {
//          $(this).find(".checkbox").is(".left-jpg")?$(this).find(".boradiu").show():$(this).find(".boradiu").hide();
            $(this).find(".checkbox").is(".left-jpg")?$(this).find("img").hide():$(this).find("img").show();
            $(this).find(".checkbox").is(".left-jpg")?$(this).find(".checkbox").removeClass("left-jpg"):$(this).find(".checkbox").addClass("left-jpg");
           count();
		});
        //全选按钮
        $("body").on("tap",".set-left",function() {
            //如果不是全选，触发了就要全选
            if(!$(this).find(".checkall").is(".set-jpg")){
                $(this).find("img").hide();
                $(this).find(".checkall").removeClass("set-jpg");
                $("body .list-left .checkbox").each(function(){
                    //如果没被选中,就要选中
                    if(!$(this).is(".left-jpg")){
                        $(this).find("img").show();
                        $(this).addClass("left-jpg");
                    }
                });
            }else{
                $(this).find("img").show();
                $(this).find(".checkall").addClass("set-jpg");
            //如果是全选状态触发,解除所有选中的状态
                $("body .list-left .checkbox").each(function(){
                    //如果被选中,就要解除选中
                    if($(this).is(".left-jpg")){
                        $(this).find("img").hide();
                        $(this).removeClass("left-jpg");
                    }
                });
            }
            count();
        })
		//加法
		$("body").on("tap",".add",function() {
			if(parseInt($(this).closest("li").attr("data-limit"))<2){
				$(this).siblings(".number").val(parseInt($(this).siblings(".number").val())+1);
                $(this).closest("li").find(".quality").val(parseInt($(this).closest("li").find(".quality").val())+1);
				updateTrolley($(this).closest("li").attr("id"),1,$(this).closest("li"));
			}else{
				$(this).siblings(".number").val(1);
                $(this).closest("li").find(".quality").val(1);
				layer.open({content: "限购商品只能购买一件",skin: 'msg',time: 1});
			}
			if(parseInt($(this).siblings(".number").val())>1){
				$(this).siblings('.min').css('border','1px solid #333');
			}
		})
		//减法
		$("body").on("tap",".min",function() {
			if(parseInt($(this).siblings(".number").val()) - 1>0){
				$(this).siblings(".number").val(parseInt($(this).siblings(".number").val())-1);
                $(this).closest("li").find(".quality").val(parseInt($(this).closest("li").find(".quality").val())-1);
				updateTrolley($(this).closest("li").attr("id"),0,$(this).closest("li"));
			}else{
                $(this).siblings(".number").val(1);
                $(this).closest("li").find(".quality").val(1);
				layer.open({content: "本商品1件起售",skin: 'msg',time: 1});
			}
			if(parseInt($(this).siblings(".number").val())==1){
				$(this).css('border','1px solid #999');
			}else{
				$(this).css('background','1px solid #333');
			}

		});
        $("body").on("blur",".number",function() {
            if(parseInt($(this).closest("li").attr("data-limit"))<2){
//                $(this).siblings(".number").val(parseInt($(this).siblings(".number").val())+1);
//                updateTrolley($(this).closest("li").attr("id"),1,this);
            }else{
                $(this).siblings(".number").val(1);
//                layer.open({content: "限购商品只能购买一件",skin: 'msg',time: 1});
            }
        });
	});
</script>

</html>
